<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>会员界面</title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
		<style type="text/css">
			body {
				background-color: #F0F8FF
			}

			.avatar-uploader .el-upload {
				border: 5px dashed #FF9999;
				border-style: solid;
				border-radius: 150px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 175px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 250px;
				height: 250px;
				display: block;
				border-radius: 30px;
			}

			/* card的样式 */
			.time {
				font-size: 13px;
				color: #999;
			}

			.bottom {
				margin-top: 13px;
				line-height: 12px;
			}

			.button {
				padding: 0;
				float: right;
			}

			.image {
				width: 100%;
				height: 200px;
				display: block;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both
			}

			.el-carousel__item h3 {
				color: #475669;
				font-size: 14px;
				opacity: 0.75;
				line-height: 200px;
				margin: 0;
			}

			.el-carousel__item:nth-child(2n) {
				background-color: #99a9bf;
			}

			.el-carousel__item:nth-child(2n+1) {
				background-color: #d3dce6;
			}
		</style>
	</head>
	<body>
		<div id="navigation">
			<!-- 导航菜单🧭 -->
			<el-row class="tac" :gutter="20">
				<!-- 布局左边为导航栏 -->
				<el-col :span="6">
					<el-menu default-active="1" class="el-menu-vertical-demo" background-color="#F0F8FF">
						<!-- 显示当前用户 -->
						<el-menu-item index="0">
							<i class="el-icon-user"></i>
							<span>当前用户:{{member.userName}}</span>
						</el-menu-item>
						<!-- 个人信息 -->
						<el-menu-item index="1" @click="showPersonal">
							<i class="el-icon-user"></i>
							<span slot="title">个人信息修改</span>
						</el-menu-item>
						<!-- 课程管理 -->
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span slot="title">课程管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="2-1" @click="showPurchaseCourses">购买课程</el-menu-item>
								<el-menu-item index="2-2" @click="showFavoriteCourses">我的收藏</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!-- 购物车 -->
						<el-menu-item index="3" @click="showShoppingCart">
							<i class="el-icon-shopping-cart-full"></i>
							<span slot="title">购物车</span>
						</el-menu-item>
						<!-- 订单中心 -->
						<el-menu-item index="4" @click="showOrderCenter">
							<i class="el-icon-goods"></i>
							<span slot="title">订单中心</span>
						</el-menu-item>
						<!-- 我的钱包 -->
						<el-menu-item index="5" @click="showMyWallet">
							<i class="el-icon-wallet"></i>
							<span slot="title">幻灯片</span>
						</el-menu-item>
					</el-menu>
				</el-col>
				<!-- 个人中心界面 -->
				<el-col v-if="status==1" :span="12" :offset="6">
					<!-- 用户头像的修改 -->
					<el-upload class="avatar-uploader" action="http://localhost:8888/member/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<!-- 测试用 -->
						<img :src="imageUrl" class="avatar" title="点击修改">
					</el-upload>
					<br>
				</el-col>
				<el-col v-if="status==1" :span="6" :offset="4">
					<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="用户名">
							<el-input v-model="ruleForm.userName" placeholder="修改用户名"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio-group v-model="ruleForm.sexId">
								<el-radio-button label="1">男</el-radio-button>
								<el-radio-button label="2">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="生日">
							<el-date-picker v-model="ruleForm.birth" type="date" value-format="yyyy-MM-dd"
								placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="支付密码">
							<el-input v-model="ruleForm.payPassword" placeholder="设置支付密码" show-password></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">保存修改</el-button>
						</el-form-item>
					</el-form>
					<!-- 测试加载用户是否有效 -->
					<!-- <el-button type="primary" @click="loadMember()">测试</el-button> -->
				</el-col>
				<!-- TODO 课程管理(购买课程,我的收藏),购物车,订单中心,我的钱包 -->
				<!--2.课程管理 -->
				<!--2.1购买课程的界面 -->
				<el-col v-if="status==2" :span="5" v-for="sub in subject">
					<el-card :body-style="{ padding: '0px' }" style="height:320px">
						<img :src=sub.subjectPhoto class="image">
						<div style="padding: 14px;">
							<span>{{sub.subjectName}} 价格{{sub.subjectPrice}}元 课时:{{sub.duration}}节</span>
							<div class="bottom clearfix">
								<el-button-group>
									<div class="block">
										<span class="demonstration">区分颜色</span>
										<el-rate v-model="value2" :colors="colors">
										</el-rate>
									</div>
									<el-button type="primary" icon="el-icon-star-on" size="mini"
										@click="addCollectSub(sub.subjectId)">收藏</el-button>
									<el-button type="primary" icon="el-icon-shopping-cart-2" size="mini"
										@click="addCartSub(sub.subjectId)">加入购物车</el-button>
								</el-button-group>
							</div>
						</div>
					</el-card>
				</el-col>
				<!-- TODO 2.2我的收藏 -->
				<el-col v-if="status==3" :span="18">
					<template>
						<el-table :data="collectData" style="width: 100%">
							<el-table-column label="课程名称" width="180">
								<template slot-scope="scope">
									<span style="margin-left:10px">{{scope.row.subjectName}}</span>
								</template>
							</el-table-column>
							<el-table-column label="单价" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.subjectPrice}}</span>
								</template>
							</el-table-column>
							<el-table-column label="起始时间" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.startDate}}</span>
								</template>
							</el-table-column>
							<el-table-column label="结束时间" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.endDate}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger"
										@click="collectDelete(scope.$index, scope.row)">
										删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-col>
				<!-- TODO 购物车界面 -->
				<el-col v-if="status==4" :span="18">
					<template>
						<el-table :data="cartData" style="width: 100%">
							<el-table-column label="课程名称" width="180">
								<template slot-scope="scope">
									<span style="margin-left:10px">{{scope.row.subjectName}}</span>
								</template>
							</el-table-column>
							<el-table-column label="单价" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.subjectPrice}}</span>
								</template>
							</el-table-column>
							<el-table-column label="数量" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.count}}</span>
								</template>
							</el-table-column>
							<el-table-column label="小计" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.count*scope.row.subjectPrice}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">增加</el-button>
									<el-button size="mini" @click="handleIncr(scope.$index, scope.row)">减少</el-button>
									<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
										删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
					<template>
						<el-button type="primary" @click="commit">购买</el-button>
						<span>商品总数：{{totalCount}}</span>
						<span style="margin-left: 50px">总价：{{totalPrice}}元</span>
					</template>
				</el-col>
				<!-- 订单中心 -->
				<el-col v-if="status==5" :span="18">
					<template>
						<el-table :data="orderData" style="width: 100%">
							<el-table-column label="课程名称" width="180">
								<template slot-scope="scope">
									<span style="margin-left:10px">{{scope.row.subjectName}}</span>
								</template>
							</el-table-column>
							<el-table-column label="教练" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.coachName}}</span>
								</template>
							</el-table-column>
							<el-table-column label="课程费用" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.subjectPrice}}</span>
								</template>
							</el-table-column>
							<el-table-column label="班级人数" width="180">
								<template slot-scope="scope">
									<span style="margin-left: 10px">{{scope.row.number}}</span>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-col>
				<!-- 我的钱包 -->
				<el-col v-if="status==6" :span="18">
					<template>
						<el-carousel :interval="4000" type="card" height="200px">
							<el-carousel-item v-for="item in imgUrl" :key="item">
								<img :src="item" style="width: 100%;">
							</el-carousel-item>
						</el-carousel>
					</template>
				</el-col>
			</el-row>
		</div>
	</body>
	<!-- Vue -->
	<script>
		new Vue({
			el: "#navigation",
			data() {
				return {
					//实现页面切换
					status: 0,
					//头像默认地址(这里也可以不写直接加载用户时拿到头像地址)
					imageUrl: '',
					//头像框的内容显示
					disabled: false,
					// 加载的用户信息
					member: {
						userId: '',
						userName: '',
						userPhone: '',
						balance: '',
						photo: '',
						payPassword: '',
						sexId: '',
						birth: ''
					},
					//表单需要提交的信息
					ruleForm: {
						userName: '',
						payPassword: '',
						sexId: '',
						birth: ''
					},
					//渲染课程的信息
					subject: [],
					//购物车信息🛒
					cartData: [],
					subjectIds: [],
					//收藏的信息
					collectData: [],
					//订单中心信息
					orderData: [],
					//评分值
					value2: "",
					//颜色值
					// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
					colors: ['#FFB6C1', '#F7BA2A',
						'#FF9900'
					],
					imgUrl:["https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF","https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF","https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF","https://t7.baidu.com/it/u=2501476447,3743798074&fm=193&f=GIF"]
				}
			},
			computed: {
				//总的商品数量
				totalCount() {
					var _this = this;
					var totalCount = 0;
					//获取所有商品对应的数量去累加
					_this.cartData.forEach(cartItem => {
						totalCount += cartItem.count;
					});
					return totalCount;
				},
				//总计
				totalPrice() {
					var _this = this;
					var totalPrice = 0;
					//获取所有已经选中的商品对应的数量去累加
					var cartItems = _this.cartData;
					var selectedIds = _this.subjectIds;
					cartItems.forEach(cartItem => {
						if (selectedIds.includes(cartItem.subjectId)) {
							totalPrice += cartItem.count * cartItem.subjectPrice;
						}
					});
					return totalPrice;
				}
			},
			methods: {
				// 个人中心界面
				showPersonal() {
					let _this = this;
					_this.loadLastMember();
					_this.status = 1;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
				},
				// 购买课程界面
				showPurchaseCourses() {
					let _this = this;
					_this.status = 2;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
				},
				// 收藏课程界面
				showFavoriteCourses() {
					let _this = this;
					_this.status = 3;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
					_this.loadCollect();
				},
				// 购物车界面
				showShoppingCart() {
					let _this = this;
					_this.status = 4;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
					console.log('当前加载用户的购物车数据如下')
					_this.loadCartInfo();
				},
				// 订单中心界面
				showOrderCenter() {
					let _this = this;
					_this.status = 5;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
					_this.loadOrder();
				},
				// 我的钱包界面
				showMyWallet() {
					let _this = this;
					_this.status = 6;
					console.log('当前选中的菜单栏下标如下')
					console.log(_this.status);
				},
				// 上传头像成功的处理
				handleAvatarSuccess(res, file) {
					let _this = this;
					_this.imageUrl = res.data.data;
				},
				// 上传头像之前的处理
				beforeAvatarUpload(file) {
					const isJPG = file.type === 'image/jpeg';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				},
				//提交用户简介的表单
				submitForm(formName) {
					let _this = this;
					console.log('以下表单中提交的信息' + _this.ruleForm);
					console.log(_this.ruleForm);
					axios.post("/member/update", {
						//这里暂时测试使用
						// userId:'1',
						userId: _this.member.userId,
						userName: _this.ruleForm.userName,
						payPassword: _this.ruleForm.payPassword,
						sexId: _this.ruleForm.sexId,
						birth: _this.ruleForm.birth,
						photo: _this.imageUrl
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						//对请求数据的格式进行处理，得到和form表单中post提交时一样的结构
						transformRequest: function(data) {
							console.log('以下全部提交的信息,新增了userId以及photo地址' + data);
							console.log(data);
							return Qs.stringify(data);
						}
					}).then(function(res) {
						console.log('提交成功的信息如下所示')
						console.log(res);
						if (res.data.data == true) {
							_this.$message({
								message: '修改成功',
								type: 'success'
							});
						}
						//TODO 这里可以写提交成功后的信息
						//{data: {…}, status: 201, statusText: 'Created', headers: {…}, config: {…}, …}	返回的值
					}).catch(function() {
						//只有当出现404或500等错误情况的时候会进入catch
						alert('修改信息异常,请稍后再试');
					});
				},
				loadMember() {
					// TODO 加载用户信息
					let _this = this;
					axios.get("/member/getMember").then(function(res) {
						let result = res.data;
						if (result.code = 201) {
							console.log("登陆成功")
							_this.member.userId = result.data.id;
							_this.member.userName = result.data.userName;
							_this.member.payPassword = result.data.payPassword;
							_this.ruleForm.userName = result.data.userName;
							_this.ruleForm.payPassword = result.data.payPassword;
							_this.ruleForm.sexId = result.data.sexId;
							console.log('初始用户加载完毕结果如下');
							console.log(_this.member);
						}
					}).catch(function() {
						//只有当出现404或500等错误情况的时候会进入catch
						alert('当前没有登陆');
						location.href = "login.html";
					});

				},
				loadLastMember() {
					// TODO 加载最新用户信息
					let _this = this;
					axios.get("/member/get", {
						params: {
							id: _this.member.userId
						}
					}).then(function(res) {
						let result = res.data;
						if (result.code = 201) {
							_this.member.userId = result.data.id;
							_this.member.userName = result.data.userName;
							_this.member.userPhone = result.data.userPhone;
							_this.member.balance = result.data.balance;
							_this.member.photo = result.data.photo;
							// _this.payPassword: '',
							_this.member.sexId = result.data.sexId;
							_this.member.birth = result.data.birth;
							_this.member.payPassword = result.data.payPassword;
							_this.imageUrl = result.data.photo;
							_this.ruleForm.userName = result.data.userName;
							_this.ruleForm.payPassword = result.data.payPassword;
							_this.ruleForm.sexId = result.data.sexId;
							console.log('最新用户加载完毕结果如下');
							console.log(_this.member);
							console.log('最新表单加载完毕结果如下');
							console.log(_this.ruleForm);
						}
					}).catch(function() {
						//只有当出现404或500等错误情况的时候会进入catch
						alert('用户信息加载异常');
					});
				},
				//TODO 课程管理(购买课程,我的收藏),购物车,订单中心,我的钱包
				//加载购买课程的界面
				loadSubject() {
					let _this = this;
					axios.get("/subject/all").then(function(res) {
						let result = res.data;
						_this.subject = res.data.data;
						console.log('加载的课程信息如下')
						console.log(_this.subject)
					});
				},
				//加载我的收藏
				loadCollect() {
					let _this = this;
					axios.get("/collect/show").then(function(res) {
						console.log('加载我的课程信息如下')
						console.log(res)
						_this.collectData = res.data.data;
					});
				},
				//加入收藏的功能
				addCollectSub(subjectId) {
					var _this = this;
					axios.post("collect/add", {
						subjectId: subjectId
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						//对请求数据的格式进行处理，得到和form表单中post提交时一样的结构
						transformRequest: function(data) {
							console.log(data);
							return Qs.stringify(data);
						}
					}).then(function(res) {
						_this.loadCollect();
						console.log(res)
						_this.$message({
							message: "加入收藏成功",
							type: 'success'
						});
					});
				},
				//加入购物车功能
				addCartSub(subjectId) {
					var _this = this;
					var memberId = _this.member.userId;
					axios.get("/carts/addItem", {
						//这里的params最终会被解析成 ?参数名=参数值&参数名=参数值&……带在地址栏的后面
						params: {
							memberId: _this.member.userId,
							subjectId: subjectId,
							count: 1
						}
					}).then(function(res) {
						console.log(res);
						_this.$message({
							message: '加入购物车成功',
							type: 'success'
						});
					}).catch(function() {
						_this.$message({
							message: '加入购物车失败',
							type: 'false'
						});
					});;
				},
				//购物车功能
				loadCartInfo() {
					let _this = this;
					axios.get("/carts/getCartInfo", {
						//这里的params最终会被解析成 ?参数名=参数值&参数名=参数值&……带在地址栏的后面
						params: {
							memberId: _this.member.userId
						}
					}).then(function(res) {
						console.log(res);
						_this.cartData = res.data.data;
						console.log('下面是测试购物车渲染情况');
						console.log(_this.cartData);
						_this.subjectIds = _this.cartData.map(cartItem => cartItem.subjectId);
						console.log('下面是测试购物车ID情况');
						console.log(_this.subjectIds);
					});
				},
				//增加购物车的数量
				handleEdit(index, row) {
					console.log(index, row);
					var _this = this;
					var subjectId = row.subjectId;
					var count = row.count;
					var memberId = _this.member.userId;
					axios.get("/carts/addItem", {
						params: {
							memberId: memberId,
							count: 1,
							subjectId: subjectId
						}
					}).then(function(res) {
						_this.loadCartInfo()
					});
				},
				handleIncr(index, row) {
					console.log(index, row);
					var _this = this;
					var subjectId = row.subjectId;
					var count = row.count;
					var memberId = _this.member.userId;
					if (count > 1) {
						axios.get("/carts/addItem", {
							params: {
								memberId: memberId,
								count: -1,
								subjectId: subjectId
							}
						}).then(function(res) {
							_this.loadCartInfo()
						});
					} else {
						_this.$message({
							message: '数量必须大于0',
							type: 'success'
						});
					}
				},
				//删除购物车物品
				handleDelete(index, row) {
					console.log(index, row);
					var _this = this;
					var subjectId = row.subjectId;
					var memberId = _this.member.userId;
					axios.get("/carts/delItem", {
						params: {
							memberId: memberId,
							subjectId: subjectId
						}
					}).then(function(res) {
						_this.loadCartInfo()
					});
				},
				//购买商品产生订单
				commit() {
					var _this = this;
					var subjectId = _this.subjectIds;
					var memberId = _this.member.userId;
					var CartItem = _this.cartData;
					console.log('下面是测试购物车ID情况');
					console.log(subjectId);
					//TODO 数组提交出错！！！！！！！！
					axios.post("/carts/commit", {
						subjectId: subjectId,
						memberId: memberId
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						//对请求数据的格式进行处理，得到和form表单中post提交时一样的结构
						transformRequest: function(data) {
							console.log('以下全部提交的信息,新增了userId以及photo地址' + data);
							console.log(data);
							return Qs.stringify(data);
						}
					}).then(function(res) {
						_this.loadCartInfo();
					});
				},
				//TODO 我的收藏
				collectDelete(index, row) {
					var _this = this;
					console.log(index, row);
					var subjectId = row.subjectId;
					axios.post("collect/del", {
						subjectId: subjectId
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						//对请求数据的格式进行处理，得到和form表单中post提交时一样的结构
						transformRequest: function(data) {
							console.log(data);
							return Qs.stringify(data);
						}
					}).then(function(res) {
						_this.loadCollect();
						console.log(res)
					});
				},
				//加载订单表
				loadOrder() {
					var _this = this;
					var memberId = _this.member.userId;
					axios.get("/carts/getOrderById", {
						params: {
							memberId: memberId,
						}
					}).then(function(res) {
						console.log("下面是加载用户订单表");
						console.log(res);
						_this.orderData = res.data.data
						console.log("下面是渲染的个人订单的具体数据");
						console.log(_this.orderData);
					});
				}
			},
			mounted() {
				// 加载初始用户信息使用loadMember() 将用户信息渲染上，然后再渲染imgeurl对应上用户的id
				let _this = this;
				//加载用户信息
				_this.loadMember();
				// 加载课程信息
				_this.loadSubject();
				var message = '欢迎VIP用户';
				_this.$message({
					message: message,
					type: 'success'
				});

			}
		});
	</script>
</html>
